<template>
  <div>
    <el-container>
      <el-header
        height="60px"
        style="
          display: flex;
          padding: 10px 0;
          justify-content: flex-start;
          margin:0 100px;
          border-bottom: 1px solid #00000022;
        "
      >
        <el-button
          type="primary"
          round
          plain
          size="mini"
          icon="el-icon-plus"
          @click="handleAdd"
          >新建传染病调查模板</el-button
        >
          <el-input
            placeholder="请输入内容"
            style="width: 300px;
            margin:0 100px;"
            clearable
            v-model="searchValue"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleSearch"
            />
          </el-input>
        <div
          style="
            position: absolute;
            right: 20px;
            display: inline-block;
            line-height: 40px;
          "
        >
          <el-button
            type="warning"
            icon="el-icon-switch-button"
            plain
            @click="logout"
            >登出</el-button
          >
          
        </div>
      </el-header>
      <el-main
        style="
          background: rgb(245, 245, 245);
          padding: 20px;
          overflow: auto;
          min-height: 500px;
          overflow-y: auto;
          max-height: calc(100vh - 60px);
        "
        v-loading.fullscreen.lock="loading"
      >
        <div
          style="
            display: flex;
            justify-content: space-around;
            margin-bottom: 16px;
          "
        >
        </div>
        <el-row :gutter="12" v-for="o in data" :key="o.name">
          <el-col :span="24">
            <el-card shadow="hover">
              <div style="display: flex; justify-content: space-between">
                <div>{{ o.name }}</div>
                <div>
                  <el-button type="text" @click="handleOpen(o.name)"
                    >查看</el-button
                  >
                  <el-divider direction="vertical"></el-divider>
                  <el-popconfirm
                    @confirm="handleDelete(o.name)"
                    title="确定删除吗？"
                  >
                    <el-button slot="reference" type="text" style="color: red"
                      >删除</el-button
                    >
                  </el-popconfirm>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-pagination
          :current-page.sync="currentPage"
          :total="total"
          :page-size.sync="pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          @current-change="pageChange"
          layout="prev, pager, next,jumper"
        >
        </el-pagination>
      </el-main>
    </el-container>
    <el-dialog title="请输入模板名称" :visible.sync="dialogVisible" width="30%">
      模板名称：
      <el-input placeholder="请输入模板名称" v-model="tempName"> </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { writeJSON, loadJSON, generateID } from "@/utils/utils";

import { mapGetters } from "vuex";
import { deleteJSON, getData, logout, postJSON } from "@/utils/http";
import { URL_MAP } from "@/config/config";
export default {
  components: {},
  data() {
    return {
      data: [],
      searchValue: "",
      currentPage: 0,
      pageSize: 10,
      total: 10,
      loading: false,
      dialogVisible: false,
      tempName: "",
    };
  },
  computed: {
    ...mapGetters({
      ilayout: "layout",
    }),
  },
  watch: {},
  mounted() {
    this.fetch();
  },
  methods: {
    handleCreate() {
      this.dialogVisible = false;
      this.loading = true;
      postJSON(URL_MAP.METADATA, {
        name: this.tempName,
        form: {
          title: this.tempName,
          subforms: [],
        },
        fieldToName: [],
        config: {},
      })
        .then((data) => {
          if (data.code === 0) {
            this.$notify.success("创建数据成功！");
          } else {
            this.$notify.error(data.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.$notify.error("创建数据失败！");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleOpen(name) {
      console.log(name);
      this.$store.commit("metedata", name);
      this.$router.push({
        name: "preview",
      });
    },
    handleDelete(name) {
      this.loading = true;
      deleteJSON(URL_MAP.METADATA, { name: name })
        .then((data) => {
          if (data.code === 0) {
            this.$notify.success(`删除${name}成功！`);
          } else {
            this.$notify.error(data.msg);
          }
        })
        .catch((e) => {
          this.$notify.error(`删除${name}失败！`);
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleAdd() {
      this.dialogVisible = true;
    },
    pageChange(e) {
      this.fetch();
    },
    handleSearch(v) {
      if (this.searchValue === "") {
        this.searchValue = undefined;
      }
      this.fetch();
    },
    async fetch() {
      this.loading = true;
      try {
        let data = await getData(URL_MAP.METADATA_LIST, {
          currentPage: this.currentPage - 1,
          pageSize: this.pageSize,
          name: this.searchValue,
        });
        // console.log(data);
        if (data.code === 0) {
          this.$notify.success("获取数据成功！");
          this.data = data.data.data;
          this.total = data.data.totalCount;
        } else {
          this.$notify.error(data.msg);
        }
      } catch (e) {
        console.log(e);
        this.$notify.error("获取数据失败！");
      } finally {
        this.loading = false;
      }
    },
    loadLayout() {
      loadJSON()
        .then((data) => {})
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {});
    },
    logout() {
      logout();
      this.$store.commit('logout')
      this.$router.push({
        name:'login'
      })
    }
  },
};
</script>

<style>
</style>